{% extends 'web/layout/basic.html' %}
{% load static %}
{% block title %} 订单 {% endblock %}

{% block content %}

    <div class="container">
        <h2>购物车</h2>
        <table class="table">
            <thead>
            <tr>
                <th>订单号</th>
                <th>订单类型</th>
                <th>下单时间</th>
                <th>单价</th>
                <th>数量</th>
                <th>原价</th>
                <th>实际支付</th>
                <th></th>
                
            </tr>
            </thead>
            <tbody>
            {% for obj in unpaid_order_objs%}
            <tr>
                <td>{{ obj.order }}</td>
                <td>{{ obj.price_policy__title}}</td>
                <td>{{ obj.create_datetime}}</td>
                <td>¥{{ obj.price_policy__price }}</td>
                <td>{{ obj.count }}</td>
                <td>¥{{ obj.price_policy__price }}</td>
                <td>¥{{ obj.price }}</td>
                <td>
                    <a href="{% url 'web:pay' %}">支付</a>
                    |
                    <a data-toggle="modal" data-target="#deleteModal" data-orderno="{{obj.order}}">删除</a>
                
                </td>
                
            </tr>
            {% endfor %}


            {% for obj in order_objs%}
            <tr>
                <td>{{ obj.order }}</td>
                <td>{{ obj.price_policy__title}}</td>
                <td>{{ obj.create_datetime}}</td>
                <td>¥{{ obj.price_policy__price }}</td>
                <td>{{ obj.count }}</td>
                <td>¥{{ obj.price_policy__price }}</td>
                <td>¥{{ obj.price }}</td>
                <td>
                    <span style="opacity: 0.4">已过期</span>
                    |
                    <a data-toggle="modal" data-target="#deleteModal" data-orderno="{{obj.order}}">删除</a>
                
                </td>
                
            </tr>
            {% endfor %}
            
            </tbody>
        </table>

        
        <a class="btn btn-primary" id='displayOrder' onclick="toggleDisplay();" style='align:right;'>历史交易记录</a>
        <table id="historyTable" class="table" style="display:none">
            <thead>
            <tr>
                <th>订单号</th>
                <th>订单类型</th>
                <th>起始时间</th>
                <th>结束时间</th>
                <th>单价</th>
                <th>数量</th>
                <th>原价</th>
                <th>实际支付</th>
                <th></th>
                
            </tr>
            </thead>
            <tbody>
            
            
            {% for obj in history_order_objs%}
            <tr>
                <td>{{ obj.order }}</td>
                <td>{{ obj.price_policy__title}}</td>
                <td>{{ obj.start_datetime}}</td>
                <td>{{ obj.end_datetime}}</td>
                <td>¥{{ obj.price_policy__price }}</td>
                <td>{{ obj.count }}</td>
                <td>¥{{ obj.price_policy__price }}</td>
                <td>¥{{ obj.price }}</td>
                <td>
                    
                </td>
                
            </tr>
            {% endfor %}
            </div>
            </tbody>
        </table>


        {% if transaction %}
            <div class="alert alert-warning">
                <div>原订单抵扣：¥{{ balance }}</div>
                <div style="margin-top: 10px">
                    原订单的时间为 {{ transaction.start_datetime }}
                    ~ {{ transaction.end_datetime }}，且实际支付¥{{ transaction.price }}
                </div>
            </div>
        {% endif %}
        
    </div>


<!-- Modal delete -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">

            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                
                <h4>是否确定删除订单？</h4>
                <p style="padding-top: 20px;padding-bottom: 20px;">
                    点击确定后订单会被删除,且不可恢复。
                </p>

                <p style="text-align:right">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    <button id="btnDelSubmit" type="button" class="btn btn-danger btn-sm">确认</button>
                </p>
            </div>

    </div>
</div>
<!-- Modal delete End -->



{% endblock content %}

{% block js %}
<script>

$(function(){
    initAddModal()
    bindClickBtnDelSubmit();
});

function toggleDisplay(){
    $('#historyTable').toggle();
    
}


function initAddModal() {
        
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // delete Button that triggered the modal
            var orderno = button.data('orderno');
            $('#btnDelSubmit').attr('orderno',orderno); //把编辑中绑定的name放到form的input框传给后台/
        });

    }

function bindClickBtnDelSubmit(){
        $('#btnDelSubmit').click(function(){
            //$('.error-msg').empty();
            var orderNo = $(this).attr('orderno');
            console.log(orderNo);
            $.ajax({
                url:"{% url 'web:pay_order_delete'%}", //to any url
                type:'GET', //'POST', page?val=xxx&?val2=bbb
                data:{'orderNo':orderNo},
                dataType:'JSON',
                success:function(ret){
                    //console.log(ret);
                    if (ret.status){
                        console.log(ret);
                        location.href = location.href;
                    }else{
                        
                       }
                }
            })
        })
    }
</script>
{% endblock js%}